<template>
    <div class="page">
        <van-nav-bar
            title="充值优惠"
            left-arrow
            fixed
            @click-left="goBack"
        />

        <div class="recharge-container">
            <div class="user-info-box">
                <div class="user-info">
                    <div class="user-header">
                        <van-image
                            round
                            fit="cover"
                            :src="userInfo.heard_img"
                        />
                    </div>
                    <div class="user-name-level">
                        <div class="user-name van-ellipsis">{{userInfo.nickname}}</div>
                        <div
                            class="user-level"
                            v-if="userInfo.integral_rank"
                        >等级：{{userInfo.integral_rank.rank_name}}</div>
                    </div>
                    <div
                        class="user-legal"
                        v-if="userInfo.user_type < 2"
                    >
                        <div class="user-legal-name">剩余次数</div>
                        <div class="user-legal-info">{{userInfo.game_time}}</div>
                    </div>
                    <div
                        class="user-legal"
                        v-if="userInfo.user_type == 2"
                    >
                        <div class="vip-user-legal-name">剩余次数</div>
                        <div class="vip-user-legal-info">{{userInfo.game_time}}</div>
                        <div class="vip-user-legal-line"></div>
                        <!-- <div class="vip-user-legal-name">{{userInfo.c_vip_expire}}到期</div> -->
                        <div class="vip-user-legal-info">银卡</div>
                    </div>
                    <div
                        class="user-legal"
                        v-if="userInfo.user_type == 3"
                    >
                        <div class="vip-user-legal-name">剩余次数</div>
                        <div class="vip-user-legal-info">{{userInfo.game_time}}</div>
                        <div class="vip-user-legal-line"></div>
                        <!-- <div class="vip-user-legal-name">{{userInfo.c_vip_expire}}到期</div> -->
                        <div class="vip-user-legal-info">金卡</div>
                    </div>
                    <div
                        class="user-legal"
                        v-if="userInfo.user_type == 4"
                    >
                        <div class="vip-user-legal-name">剩余次数</div>
                        <div class="vip-user-legal-info">{{userInfo.game_time}}</div>
                        <div class="vip-user-legal-line"></div>
                        <div class="vip-user-legal-name">{{userInfo.c_vip_expire}}到期</div>
                        <div class="vip-user-legal-info">月卡</div>
                    </div>
                    <div
                        class="user-legal"
                        v-if="userInfo.user_type == 5"
                    >
                        <div class="vip-user-legal-name">剩余次数</div>
                        <div class="vip-user-legal-info">{{userInfo.game_time}}</div>
                        <div class="vip-user-legal-line"></div>
                        <div class="vip-user-legal-name">{{userInfo.c_vip_expire}}到期</div>
                        <div class="vip-user-legal-info">年卡</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="buy-container">
            <div class="classify-box">
                <div class="classify-title">选择购买种类</div>
                <div class="classify-list">
                    <div
                        class="classify-item-box"
                        v-for="(item,index) in typeSelectList"
                        :key="index"
                    >
                        <div
                            class="classify-item"
                            :class="typeSelect==index?'active':''"
                            @click="typeClick(index)"
                        >
                            <div class="classify-item-left">
                                <div class="classify-item-left-name">{{item.name}}</div>
                                <div class="classify-item-left-info">{{item.content}}</div>
                            </div>
                            <div class="classify-item-right">
                                <div class="classify-item-right-name"><span>{{index>0?'特惠价':''}}￥</span>{{index==0?item.mean_price:item.price}}</div>
                                <div
                                    class="classify-item-right-info"
                                    v-if="index>0"
                                >￥{{item.market_price}}</div>
                            </div>
                        </div>
                        <div
                            class="num-input-box"
                            v-if="index == 0&&userInfo.user_type>3"
                        >
                            <div
                                class="num-input-tips-btn"
                                @click="vipTips"
                            >查看使用说明</div>
                            <van-stepper
                                v-model="buyNum"
                                integer
                            />
                        </div>
                        <div
                            class="num-input-tips"
                            v-if="index == 0&&userInfo.user_type==4"
                        >月卡会员购买额外次数，特惠价13.3元/次</div>
                        <div
                            class="num-input-tips"
                            v-if="index == 0&&userInfo.user_type==5"
                        >年卡会员购买额外次数，特惠价4.9元/次</div>
                    </div>
                </div>
            </div>
            <div class="pay-methods-box">
                <div class="pay-methods-title">选择支付方式</div>
                <div class="pay-methods-list">
                    <van-radio-group v-model="payMethods">
                        <div class="pay-methods-item">
                            <img
                                class="pay-methods-icon"
                                src="../assets/weixin.png"
                            />
                            <div class="pay-methods-name">微信支付</div>
                            <van-radio
                                name="weixin"
                                checked-color="#ff5d34"
                            ></van-radio>
                        </div>
                    </van-radio-group>
                </div>
            </div>
        </div>

        <div class="recharge-tips-box">
            <div class="recharge-tips-title">充值说明</div>
            <div class="recharge-tips-item">1、每充值1元，得到1个积分</div>
            <div class="recharge-tips-item">2、积分可参与积分排名，可后续换取礼品、游戏时间</div>
            <div class="recharge-tips-item">3、年度积分排名前10，有机会直接进入年度总决赛圈</div>
        </div>

        <div class="recharge-balance-box">
            <div class="balance-info">支付金额<span v-if="typeSelectList.length>0"> {{(typeSelect==0?typeSelectList[typeSelect].mean_price*buyNum:typeSelectList[typeSelect].price).toFixed(2)}} </span>元</div>
            <div
                class="balance-btn"
                @click="goPay"
            >确认支付</div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            userInfo: {},
            typeSelectList: [],
            typeSelect: 0,
            payMethods: 'weixin',
            buyNum: 1
        }
    },
    created () {
        this.getUserInfo()
        this.getTypeSelectList()
    },
    beforeRouteEnter (to, from, next) {
        // 添加背景色
        window.document.body.style.backgroundColor = '#f6f6f6'
        next()
    },
    beforeRouteLeave (to, from, next) {
        // 去除背景色
        window.document.body.style.backgroundColor = ''
        next()
    },
    methods: {
        getUserInfo () {
            this.$request({
                url: '/api/user/user_info',
                method: 'post',
                params: {}
            }).then(res => {
                this.userInfo = res
            })
        },
        getTypeSelectList () {
            this.$request({
                url: '/api/Coin/get_coin_type',
                method: 'post',
                params: {}
            }).then(res => {
                this.typeSelectList = res
            })
        },
        goBack () {
            this.$router.go(-1)
        },
        typeClick (index) {
            if (this.typeSelect == index) {
                return
            }
            this.typeSelect = index
        },
        vipTips () {
            this.$dialog.alert({
                title: '使用说明',
                message: '月卡、年卡会员额外购买增加次数按照月卡、年卡对应折扣计费，所购买的次数，必须在购买者本人所持有月卡、年卡的有效期限内使用，过期无效。'
            }).then(() => {
                // on close
            })
        },
        goPay () {
            const that = this
            this.$toast.loading({
                message: '支付中...',
                forbidClick: true,
                duration: 0
            })
            let data
            if (this.typeSelect == 0) {
                data = {
                    coin_goods_id: this.typeSelectList[this.typeSelect].coin_goods_id,
                    store_id: this.userInfo.store_id,
                    num: this.buyNum,
                    is_web: 1
                }
            }
            else {
                data = {
                    coin_goods_id: this.typeSelectList[this.typeSelect].coin_goods_id,
                    store_id: this.userInfo.store_id,
                    num: 1,
                    is_web: 1
                }
            }
            this.$request({
                url: '/api/Order/order_buy_coin',
                method: 'post',
                params: data
            }).then(res => {
                this.$toast.clear()
                this.$wx.chooseWXPay({
                    timestamp: res.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                    nonceStr: res.noncestr, // 支付签名随机串，不长于 32 位
                    package: res.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                    signType: res.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                    paySign: res.sign, // 支付签名
                    success: function (res) {
                        // 支付成功后的回调函数
                        that.typeSelect = 0
                        that.buyNum = 1
                        that.getUserInfo()
                        that.getTypeSelectList()
                    }
                })
            }).catch(res => {
                this.$toast(res)
            })
        }
    }
}
</script>

<style lang="less" scoped>
.page {
    padding-top: 92px;
    padding-bottom: 90px;
}

.user-info-box {
    padding: 30px 30px 0 30px;
}

.user-info {
    display: flex;
    align-items: center;
    height: 212px;
    padding: 0 38px 0 48px;
    background-color: #db171e;
    border-radius: 30px 30px 0 0;
}

.user-header {
    width: 158px;
    height: 158px;
    background: #fff;
    padding: 6px;
    box-sizing: border-box;
    border-radius: 50%;
    .van-image {
        width: 100%;
        height: 100%;
    }
}

.user-name-level {
    flex: 1;
    min-width: 1px;
    padding: 0 28px;
}

.user-name {
    font-weight: 600;
    font-size: 32px;
    color: #fff;
}

.user-level {
    font-weight: 500;
    font-size: 22px;
    color: #fff;
    margin-top: 20px;
}

.user-legal {
    text-align: center;
}

.user-legal-name {
    font-weight: 500;
    font-size: 22px;
    color: #fff;
}

.user-legal-info {
    font-weight: 600;
    font-size: 90px;
    color: #fff;
    line-height: 90px;
    letter-spacing: 0px;
}

.vip-user-legal-name {
    font-weight: 500;
    font-size: 18px;
    color: #fff;
}

.vip-user-legal-info {
    font-weight: 600;
    font-size: 44px;
    color: #fff;
    line-height: 55px;
    letter-spacing: 0px;
}

.vip-user-legal-line {
    min-width: 114px;
    border-bottom: 1px dashed #fff;
    margin: 10px 0;
}

.buy-container {
    background-color: #fff;
}

.classify-box {
    padding: 0 30px;
}

.classify-title {
    font-weight: 500;
    font-size: 22px;
    color: #959595;
    padding: 28px 0 18px 0;
}

.classify-list {
    .active {
        background-color: #ffefea;
        border-color: #ff5b35;
    }
}

.classify-item-box {
    margin-bottom: 20px;
}

.classify-item-box:last-child {
    margin: 0;
}

.classify-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
    padding: 0 28px;
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    box-sizing: border-box;
}

.classify-item-left-name {
    font-weight: 600;
    font-size: 28px;
    color: #222;
}

.classify-item-left-info {
    font-weight: 500;
    font-size: 18px;
    color: #959595;
}

.classify-item-right {
    text-align: right;
}

.classify-item-right-name {
    font-weight: 600;
    font-size: 36px;
    color: #ff5b35;
    line-height: 30px;
    span {
        font-size: 22px;
    }
}

.classify-item-right-info {
    font-weight: 500;
    font-size: 22px;
    color: #a1a1a1;
    text-decoration: line-through;
}

.pay-methods-box {
    padding: 0 0 0 30px;
}

.pay-methods-title {
    padding-top: 38px;
    font-weight: 500;
    font-size: 22px;
    color: #959595;
}

.pay-methods-item {
    display: flex;
    align-items: center;
    height: 100px;
    padding-right: 30px;
    border-bottom: 1px solid #eee;
}

.pay-methods-item:last-child {
    border: none;
}

.pay-methods-icon {
    width: 56px;
    height: 56px;
}

.pay-methods-name {
    flex: 1;
    padding-left: 12px;
    font-weight: 600;
    font-size: 30px;
    color: #222;
}

.recharge-tips-box {
    margin-top: 20px;
    padding: 26px 30px 30px 30px;
    background-color: #fff;
}

.recharge-tips-title {
    font-weight: 500;
    font-size: 22px;
    color: #959595;
    margin-bottom: 22px;
}

.recharge-tips-item {
    font-weight: 500;
    font-size: 22px;
    color: #959595;
    margin-bottom: 22px;
}

.recharge-tips-item:last-child {
    margin: 0;
}

.recharge-balance-box {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 90px;
    background: #fff;
    z-index: 2;
    display: flex;
}

.balance-info {
    flex: 1;
    padding: 0 30px;
    line-height: 90px;
    font-weight: 500;
    font-size: 22px;
    color: #a1a1a1;
    border-top: 1px solid #eee;
    span {
        font-weight: 600;
        font-size: 36px;
        color: #222;
    }
}

.balance-btn {
    width: 300px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    background-color: #965458;
    font-weight: 600;
    font-size: 28px;
    color: #fff;
}

.num-input-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 20px;
}

.num-input-tips {
    text-align: right;
    font-weight: 400;
    font-size: 18px;
    color: #595959;
    padding-top: 10px;
}

.num-input-tips-btn {
    padding: 0 10px;
    height: 40px;
    line-height: 40px;
    font-size: 22px;
    color: #9c9c9c;
    border: 1px solid #9c9c9c;
    border-radius: 6px;
    box-sizing: border-box;
    margin-right: 20px;
}
</style>